<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="房源筛选"
      left-arrow
      @click-left="back"
    />
    <div class="sorthouse">
      <van-sticky :offset-top="46">
        <div ref="screen" class="navtab">
          <div @click="showscreen($event)">
            {{ value1 }}<van-icon size="13" name="arrow-down" />
            <div class="content">
              <van-tree-select
                :items="items"
                :active-id.sync="activeId"
                :main-active-index.sync="activeIndex"
                @click-item="areachoose"
              />
              <div class="btnarea">
                <van-button @click="reset1">重置</van-button>
                <van-button @click="screen">确定</van-button>
              </div>
            </div>
          </div>
          <div @click="showscreen($event)">
            {{ value2 + value5 }}<van-icon size="13" name="arrow-down" />
            <div class="content">
              <div class="way">
                <div>
                  <span ref="share" @click="labchoose1">合租</span>
                  <span ref="whole" @click="labchoose2">整租</span>
                </div>
                <div class="tipwords">户型</div>
                <div>
                  <span
                    v-for="item in roomlist"
                    :key="item"
                    ref="roomlist"
                    @click="labchoose3($event)"
                    >{{ item }}</span
                  >
                </div>
              </div>
              <div class="btnarea">
                <van-button @click="reset2">重置</van-button>
                <van-button @click="screen">确定</van-button>
              </div>
            </div>
          </div>
          <div @click="showscreen($event)">
            {{ value3 }}<van-icon size="13" name="arrow-down" />
            <div class="content">
              <div class="moneybox">
                <div
                  v-for="item in moneylist"
                  :key="item"
                  ref="moneylist"
                  @click="moenychoose($event)"
                >
                  {{ item }}
                </div>
              </div>
              <div class="btnarea">
                <van-button @click="reset3">重置</van-button>
                <van-button @click="screen">确定</van-button>
              </div>
            </div>
          </div>
          <div @click="showscreen($event)">
            {{ value4 }}<van-icon size="13" name="arrow-down" />
            <div class="content">
              <div class="sortbox">
                <div
                  v-for="item in sortlist"
                  :key="item"
                  ref="sortlist"
                  @click="sortchoose($event)"
                >
                  {{ item }}
                </div>
              </div>
              <div class="btnarea">
                <van-button @click="reset4">重置</van-button>
                <van-button @click="screen">确定</van-button>
              </div>
            </div>
          </div>
        </div>
      </van-sticky>
    </div>
    <div v-show="houselist.length != 0" class="list">
      <div
        v-for="item in houselist"
        :key="item.index"
        class="house"
        @click="jumptodetail(item.roomId, item)"
      >
        <img :src="item.image" alt="" />
        <div class="intrduce">
          <span class="title1">{{ item.subdistrict }}</span>
          <span class="title2"
            ><span>{{ item.rentalWay }}</span
            >|<span>{{ item.houseType }}</span
            >|<span>{{ item.roomAcre }}</span
            >|<span>{{ item.floor }}</span></span
          >
          <span v-show="item.distance" class="title2"
            ><van-icon name="location" />{{ item.distance }}</span
          >
          <div class="tips">
            <span>{{ item.rentalWay }}</span>
            <span v-if="item.paymentMethod">{{ item.paymentMethod }}</span>
            <span>{{ item.houseType }}</span>
          </div>
          <span class="title3">{{ item.price }}</span>
        </div>
      </div>
    </div>
    <div v-show="houselist.length == 0 && !show" class="nohouse">
      <img src="../../assets/nohouse.png" alt="" />
      <div>啊哦~暂无房源</div>
    </div>
    <div v-show="show" class="nohouse">
      <img src="../../assets/nohouse.png" alt="" />
      <div>加载中...</div>
    </div>
  </div>
</template>

<script>
import { getHouselist } from "../../apis/house.js";
import local from "../../utils/local.js";
import {
  getChooseCity,
  getGeolocation,
  getHouseList,
  setHouseList,
} from "@/utils/auth";
import { _local } from "@/utils/storage";
import { getAreaList } from "@/apis/city";
import { addLog } from "@/apis/user";


export default {
  data() {
    return {
      show: true,
      value1: this.$route.query.value1,
      value2: this.$route.query.value2,
      value3: this.$route.query.value3,
      value4: this.$route.query.value4,
      value5: this.$route.query.value5,
      city: "",
      cityCode: "",
      sendval: { currentPage: 1, perPage: 10 },
      houselist: [],
      activeId: 0,
      activeIndex: 0,
      items: [
        {
          text: "区域",
          children: [],
        },
      ],
      list: ["合租", "整租"],
      roomlist: ["不限", "1居室", "2居室", "3居室", "4居室", "5居+"],
      moneylist: [
        "不限",
        "1000以下",
        "1000~2000",
        "2000~3000",
        "3000~4000",
        "4000~5000",
        "5000以上",
      ],
      sortlist: [
        "默认排序",
        "价格由高到低",
        "价格由低到高",
        "面积从小到大",
        "面积从大到小",
      ],
      loading: false,
    };
  },
  created() {
    const chooseCity = getChooseCity();
    const geolocation = getGeolocation();
    if (chooseCity) {
      this.city = chooseCity.city;
      this.cityCode = chooseCity.citycode;
    } else {
      this.city = geolocation ? geolocation.city : "";
      this.cityCode = geolocation ? geolocation.citycode : "";
    }
    if (local.get("searchdata")) {
      this.sendval = JSON.parse(local.get("searchdata"));
      this.sendval.citycode = this.$route.query.cityCode;
      getHouselist(this.sendval).then((res) => {
        if (res.code === 200 || res.code === 201) {
          this.show=false
          if (res.result.list.length === 10) {
            this.loading = true;
          }
          this.houselist = res.result.list;
        }
      });
    } else {
      this.sendval.citycode = this.$route.query.cityCode;
      getHouselist(this.sendval).then((res) => {
        if (res.code === 200 || res.code === 201) {
          this.show=false
          if (res.result.list.length === 10) {
            this.loading = true;
          }
          this.houselist = res.result.list;
        }
      });
    }

    this.getdis();
  },
  mounted() {
    window.addEventListener("scroll", this.showScroll);
  },
  destroyed() {
    local.del("searchdata");
    window.removeEventListener("scroll", this.showScroll);
  },
  methods: {
    back() {
      this.$router.go(-1);
      setTimeout(()=>{
        window.location.reload()
      },100)
    },
    async getdis() {
      await getAreaList({
        citycode: _local.get("cityCode"),
      }).then((res) => {
        console.log("getAreaList", res);
        if (
          this.city === "上海市" ||
          this.city === "北京市" ||
          this.city === "天津市" ||
          this.city === "重庆市"
        ) {
          this.arealist = res.result.list.slice(1);
          this.arealist.forEach((e) => {
            const obj = {};
            obj.text = e.name;
            obj.id = e.adcode;
            this.items[0].children.push(obj);
          });
        } else {
          this.arealist = res.result.list.slice(2);
          this.arealist.forEach((e) => {
            const obj = {};
            obj.text = e.name;
            obj.id = e.adcode;
            this.items[0].children.push(obj);
          });
        }
      });
    },
    jumptodetail(e, item) {
      const list = getHouseList();

      for (let i = 0; i < list.length; i++) {
        if (list[i].roomId === item.roomId) {
          list.splice(i, 1);
        }
      }
      list.unshift(item);
      setHouseList(list);
      this.$router.push({ path: "/housedetail", query: { roomId: e } });
    },
    screen() {
      addLog({
        adcode: _local.get("adCode"),
        code: "click",
        page_name: "租房筛选二级页面",
        system: _local.get("device"),
        uid: _local.get("ryId"),
        describe: `筛选条件:${this.value1},${this.value2+this.value5},${this.value3},${this.value4},城市:${_local.get("city")}`,
      }).then((res) => {});
      document.documentElement.scrollTop = 0;
      this.loading = false;
      this.sendval.currentPage = 1;
      getHouselist(this.sendval).then((res) => {
        if (res.result.list.length === 10) {
          this.loading = true;
        }
        this.houselist = res.result.list;
      });
      this.$refs.screen.children.forEach((v) => {
        v.classList.remove("active");
      });
    },
    showscreen(e) {
      if (e.currentTarget === e.target) {
        if (e.currentTarget.classList[0] === "active") {
          e.currentTarget.classList.remove("active");
        } else {
          this.$refs.screen.children.forEach((v) => {
            v.classList.remove("active");
          });
          e.currentTarget.classList.add("active");
        }
      }
    },
    areachoose(data) {
      this.sendval.adcode = data.id;
      this.value1 = data.text.slice(0, 2) + "...";
    },
    labchoose1(event) {
      this.value2 = event.currentTarget.innerText.slice(0, 1);
      if (event.currentTarget.classList[0] === "chooseactive") {
        this.sendval.rentalWay = "0";
        event.currentTarget.classList.remove("chooseactive");
      } else {
        this.sendval.rentalWay = "1";
        event.currentTarget.classList.add("chooseactive");
        this.$refs.whole.classList.remove("chooseactive");
      }
    },
    labchoose2(event) {
      this.value2 = event.currentTarget.innerText.slice(0, 1);
      if (event.currentTarget.classList[0] === "chooseactive") {
        event.currentTarget.classList.remove("chooseactive");
        this.sendval.rentalWay = "0";
      } else {
        this.sendval.rentalWay = "2";
        event.currentTarget.classList.add("chooseactive");
        this.$refs.share.classList.remove("chooseactive");
      }
    },
    labchoose3(event) {
      this.value5 = event.currentTarget.innerText.slice(0, 2) + "...";
      if (event.currentTarget.classList[0] === "chooseactive") {
        event.currentTarget.classList.remove("chooseactive");
        this.sendval.houseType = "0";
      } else {
        this.$refs.roomlist.forEach((e) => {
          e.classList.remove("chooseactive");
        });
        if (event.target.innerText === "1居室") {
          this.sendval.houseType = "1";
        } else if (event.target.innerText === "2居室") {
          this.sendval.houseType = "2";
        } else if (event.target.innerText === "3居室") {
          this.sendval.houseType = "3";
        } else if (event.target.innerText === "4居室") {
          this.sendval.houseType = "4";
        } else if (event.target.innerText === "5居+") {
          this.sendval.houseType = "5";
        } else if (event.target.innerText === "不限") {
          this.sendval.houseType = "0";
        }
        event.currentTarget.classList.add("chooseactive");
      }
    },
    moenychoose(e) {
      this.value3 = e.currentTarget.innerText.slice(0, 2) + "...";
      if (e.currentTarget.classList[0] === "mboxactive") {
        e.currentTarget.classList.remove("mboxactive");
        this.sendval.priceMin = "1";
        this.sendval.priceMax = "10000000000";
      } else {
        this.$refs.moneylist.forEach((e) => {
          e.classList.remove("mboxactive");
        });
        if (e.target.innerText === "1000以下") {
          this.sendval.priceMin = "1";
          this.sendval.priceMax = "1000";
        } else if (e.target.innerText === "1000~2000") {
          this.sendval.priceMin = "1000";
          this.sendval.priceMax = "2000";
        } else if (e.target.innerText === "2000~3000") {
          this.sendval.priceMin = "2000";
          this.sendval.priceMax = "3000";
        } else if (e.target.innerText === "3000~4000") {
          this.sendval.priceMin = "3000";
          this.sendval.priceMax = "4000";
        } else if (e.target.innerText === "4000~5000") {
          this.sendval.priceMin = "4000";
          this.sendval.priceMax = "5000";
        } else if (e.target.innerText === "5000以上") {
          this.sendval.priceMin = "5000";
          this.sendval.priceMax = "10000000000";
        } else if (e.target.innerText === "不限") {
          this.sendval.priceMin = "1";
          this.sendval.priceMax = "10000000000";
        }
        e.currentTarget.classList.add("mboxactive");
      }
    },
    sortchoose(e) {
      this.value4 = e.currentTarget.innerText.slice(0, 2) + "...";
      if (e.currentTarget.classList[0] === "mboxactive") {
        e.currentTarget.classList.remove("mboxactive");
      } else {
        this.$refs.sortlist.forEach((e) => {
          e.classList.remove("mboxactive");
        });
        e.currentTarget.classList.add("mboxactive");
        if (e.target.innerText === "价格由高到低") {
          this.sendval.price = "1";
          this.sendval.acre = "0";
          this.sendval.order = "1";
        } else if (e.target.innerText === "价格由低到高") {
          this.sendval.price = "1";
          this.sendval.acre = "0";
          this.sendval.order = "2";
        } else if (e.target.innerText === "面积从小到大") {
          this.sendval.price = "0";
          this.sendval.acre = "1";
          this.sendval.order = "2";
        } else if (e.target.innerText === "面积从大到小") {
          this.sendval.price = "0";
          this.sendval.acre = "1";
          this.sendval.order = "1";
        } else if (e.target.innerText === "默认排序") {
          this.sendval.price = "0";
          this.sendval.acre = "0";
          this.sendval.order = "0";
        }
      }
    },
    reset1() {
      this.value1 = "位置";
      this.activeId = 0;
      this.sendval.adcode = "";
    },
    reset2() {
      this.value2 = "合/整租";
      this.value5 = "";
      this.sendval.rentalWay = "0";
      this.sendval.houseType = "0";
      this.$refs.whole.classList.remove("chooseactive");
      this.$refs.share.classList.remove("chooseactive");
      this.$refs.roomlist.forEach((e) => {
        e.classList.remove("chooseactive");
      });
    },
    reset3() {
      this.value3 = "租金";
      this.sendval.priceMin = "1";
      this.sendval.priceMax = "1000000000";
      this.$refs.moneylist.forEach((e) => {
        e.classList.remove("mboxactive");
      });
    },
    reset4() {
      this.value4 = "排序";
      this.sendval.price = "0";
      this.sendval.acre = "0";
      this.sendval.order = "0";
      this.$refs.sortlist.forEach((e) => {
        e.classList.remove("mboxactive");
      });
    },
    showScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      const windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      const scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight - 20 && this.loading) {
        this.sendval.currentPage++;
        getHouselist(this.sendval).then((response) => {
          if (response.result.list.length !== 10) {
            this.loading = false;
          }
          this.houselist = [...this.houselist, ...response.result.list];
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.sorthouse {
  .navtab {
    background-color: #fff;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    font-size: 14px;
    .content {
      background-color: #fff;
      position: absolute;
      width: 100%;
      top: 40px;
      left: 0;
      z-index: 10000;
      color: #000;
      display: none;
      .way {
        margin: 15px 20px 10px;
        font-size: 14px;
        span {
          display: inline-block;
          text-align: center;
          width: 70px;
          line-height: 35px;
          height: 35px;
          background-color: #fff;
          color: #46b8cb;
          border: 1px solid #46b8cb;
          border-radius: 5px;
          margin-right: 10px;
          margin-top: 5px;
        }
        .chooseactive {
          background-color: #46b8cb;
          color: #fff;
        }
        .tipwords {
          font-size: 13px;
          font-weight: bold;
          margin: 10px 0;
        }
      }
      .btnarea {
        .van-button {
          font-size: 16px;
          &:first-child {
            width: 35%;
            background-color: #fff;
            border: none;
          }
          &:last-child {
            width: 65%;
            background-color: #46b8cb;
            color: #fff;
          }
        }
      }
      .moneybox,
      .sortbox {
        text-align: center;
        font-size: 14px;
        div {
          height: 40px;
          line-height: 40px;
        }
        .mboxactive {
          color: #46b8cb;
        }
      }
    }
    .active {
      color: #d43b33;
      .content {
        display: block;
      }
    }
  }
}
.house {
  background-color: #fff;
  margin: 0 15px;
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #f1f1f1;
  img {
    width: 120px;
    height: 110px;
  }
  .intrduce {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    width: 190px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .title1 {
      font-size: 16px;
      font-weight: 550;
      color: #333333;
    }
    .title2 {
      font-size: 12px;
      color: #a0a0a0;
      span {
        margin: 0 2px;
      }
    }
    .tips {
      span {
        font-size: 10px;
        display: inline-block;
        margin-right: 5px;
        padding: 0px 2px;
        border: 1px solid #45b7cb;
        color: #45b7cb;
      }
    }
    .title3 {
      color: #d43b33;
      font-size: 16px;
      font-weight: bold;
      span {
        font-size: 12px;
        margin-left: 3px;
      }
    }
  }
}
.nohouse {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    margin-top: 20px;
    width: 200px;
  }
  div {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
  }
}
</style>
